<style src="../../style/statistics.css" scoped></style>
<template>
  <div class="containerTable">
    <Row class="divSearch">
    <!--搜索框-->
      <Col span="14" >
          <label class="searchLabel">所属地区:</label>
          <Select v-model="searchModel.AreaCode"  placeholder="请选择..." class="searchInput" @on-change="GetData()">
              <Option :value="userInfo.AreaCode">{{(userInfo.AreaCode=='530000000000')?'全省':'全市（州）'}}</Option>
              <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
          </Select>                              
          <label class="searchLabel">填报年度:</label>
          <Select v-model="searchModel.FillInYear" placeholder="全部" :label-in-value="true" @on-change="GetData()" class="searchInput">
              <!-- <Option value="">全部</Option> -->
              <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
          </Select>
      </Col>                                      
      <Col span="10" class="searchRight">    
          <Button class="searchButton" type="primary"  @click="Download(userInfo.AreaCode)">导出列表</Button>                                        
          <RadioGroup v-model="currentButton" @on-change="changeButton" type="button" >
              <Radio label="listShow" >列表<Icon type="ios-paper" size="10"></Icon></Radio>                            
              <Radio label="barShow" >柱状图<Icon type="stats-bars" size="10"></Icon></Radio>
              <Radio label="mapShow" >地图<Icon type="android-map" size="10"></Icon></Radio>                            
          </RadioGroup>                    
    </Col>                           
  </Row>            
    <Row  v-show="listShow">
      <!-- 列表-->
      <div class="divStatis">
          <table class="statisTable">
            <thead>
              <tr>
                <th rowspan="2">地区</th>
                <th rowspan="2">生产总量（吨）</th>
                <th colspan="2">其中外销量（出县）</th>
                <th rowspan="2">生产总额（元）</th>
                <th colspan="2">其中外销产值（出县）</th>
                <!-- <th v-show="searchModel.AreaCode=='530000000000'">操作</th> -->
              </tr>
              <tr>
                <th>水果外销量（出县）（吨）</th>
                <th>比上年增减%</th>
                <th>水果外销产值（出县）（元）</th>
                <th>比上年增减%</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(dataModel,index) in datalist" :key="index" :style="rowStyle(index,datalist.length)">
              <td style="text-align:center">{{dataModel.AreaName}}</td>
              <td>{{(dataModel.ProductNumber)?FormatBigNum(dataModel.ProductNumber.toFixed(1)):''}}</td>
              <td>{{(dataModel.SaleNumber)?FormatBigNum(dataModel.SaleNumber.toFixed(1)):''}}</td>
              <td>{{(dataModel.pecSaleNumber)?dataModel.SaleNumber.toFixed(1):''}}</td>
              <td>{{(dataModel.ProductMoney)?FormatBigNum(dataModel.ProductMoney.toFixed(2)):''}}</td>
              <td>{{(dataModel.SaleMoney)?FormatBigNum(dataModel.SaleMoney.toFixed(2)):''}}</td>
              <td>{{(dataModel.pecSaleMoney)?dataModel.pecSaleMoney.toFixed(2):''}}</td>
              <!-- <td v-show="searchModel.AreaCode=='530000000000'" style="text-align:center">
                <Button type="primary" size="small" @click="getDetail(dataModel.AreaCode)">详情</Button>
                <Button type="primary" size="small" @click="Download(dataModel.AreaCode)">导出</Button>
              </td> -->
              </tr>                    
            </tbody>
          </table>
      </div>
    </Row>
    <Row v-show="barShow">
      <!--饼图-->
      <div id="divBar" style="border:1px solid #D7DDE4; ">饼图</div>
    </Row>
    <Row  v-show="mapShow">
        <!--地图展示-->
        <div id="divMap"  style="border:1px solid #D7DDE4; ">地图</div>
    </Row>
    <Modal v-model="showType" :mask-closable="false" width="1200">
        <p slot="header" class="title">
          <Icon type="ios-paper" size="20"></Icon>
            <span style="font-size: 20px">详细信息</span>
        </p>
        <p slot="close">
          <Icon type="close-circled" color="red" size=25></Icon>
        </p> 
        <div style="overflow-y:auto;height:450px;">
          <Table  :row-class-name="rowClassName"  :data="detailList" no-data-text='暂无数据...' :border=true :columns="columnsList" size="small" >
          </Table> 
        </div> 
        <p slot="footer">              
        </p>   
    </Modal>
 </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      chartStyle:{height:(window.innerHeight - 220)+'px',width:(window.innerWidth - 250)+'px'},
      showType:false,
      detailList:[],//详情页列表对象
      currentButton: "listShow",
      listShow: true, //列表显示控制器
      barShow: false, //饼图显示控制器
      mapShow: false, //地图显示控制器
      userInfo: this.GetlocaStorage("fruuserinfo"),
      AreaList: this.SearchAreaList(this.GetlocaStorage("fruuserinfo").AreaCode),//所属行政区划数组,
      CreateYearList: this.GetGroupDict("ReportYear"), //周期
      CycleList: this.GetGroupDict("ReportCycle"), //
      //柱状图数据
      AreaData:[],
      ProductNumberData:[],
      SaleNumberData:[],
      ProductMoneyData:[],
      SaleMoneyData:[],
      barList:[],
        //地图数据
      mapList:[],
      echartsItem:['水果全年生产总量','水果外销量(出县)','水果全年生产总产值','水果外销产值(出县)'],
      mapType:'',
      MapProductNumberData:[],
      MapSaleNumberData:[],
      MapProductMoneyData:[],
      MapSaleMoneyData:[],
      GeoData:'',
      //地图数据完
      DataModel: {
        //编辑模型
        Id: 0,
        ReportId: "",
        ProductNumber: "",
        SaleNumber: "",
        ProductMoney: "",
        SaleMoney: "",
        pecSaleNumber: "",
        pecSaleMoney: ""
      },
      //查询模型：根据需求删除不不要查询条件
      searchModel: {
        ReportCode: "FruExport",
        FillInYear: new Date().getFullYear() + "",
        TimesType: "",
        AreaCode: this.GetlocaStorage("fruuserinfo").AreaCode,
        Status: "",
        PageNumber: 1,
        PageSize: 20
      },
      pageSizeOpts: [20, 40, 50], //默认分页最大设置
      datas: {}, //table数据对象
      datalist: [],
      dataIds: [],
      ctx: this, //table数据上下文
      columnsList: [
        { title: "地区", key: "AreaName" },
        { title: "生产总量（吨）", key: "ProductNumber", width: 160 },
        { title: "外销量（吨）", key: "SaleNumber", width: 160 },
        { title: "生产总额（元）", key: "ProductMoney", width: 160 },
        { title: "外销额（元）", key: "SaleMoney", width: 160 }
      ],
      clientHeight: window.innerHeight - 220 //表格默认高度v-omg-operation="{op:'query'}"
    };
  },
  mounted() {
    //table高度计算方法
    const that = this;
    window.onresize = () => {
      return (() => {
        that.clientHeight = window.innerHeight - 220;
      })();
    };
  },
  methods: {
    changeButton(n) {
      if (n == "listShow") {
        this.listShow = true; //显示列表
        this.barShow = false;
        this.mapShow = false;
      } else if (n == "barShow") {
        this.listShow = false;
        this.barShow = true; //显示饼图
        this.mapShow = false;
      } else if (n == "mapShow") {
        this.listShow = false;
        this.barShow = false; //显示地图
        this.mapShow = true;
        //  this.getStatsData();   //获取地区统计数据
        //this.showMap();
      } else {
        this.listShow = true; //默认显示列表
        this.barShow = false;
        this.mapShow = false;
      }
    },
    getListData() {
      var self = this;
       //判断当前用户是否为省级账号
      if(self.userInfo.AreaCode=="530000000000")
      {
          // self.isProvince=true;
          self.mapType=self.searchModel.AreaCode;
      }
      else{
          self.mapType=self.userInfo.AreaCode;
      }
      self.AreaData=[];
      self.ProductNumberData=[];
      self.SaleNumberData=[];
      self.ProductMoneyData=[];
      self.SaleMoneyData=[];
      self.MapProductNumberData=[];
      self.MapSaleNumberData=[];
      self.MapProductMoneyData=[];
      self.MapSaleMoneyData=[];
      self.barList=[],
        //地图数据
      self.mapList=[],
      self.GeoData=self.GetGeoData(self.mapType);  
      this.$http.get("FruExport/GetStatisListData", {params: {AreaCode: this.searchModel.AreaCode,FillInYear: this.searchModel.FillInYear}}).then(function(res) {
          if (res.data.status == 1) {
            console.log(res.data);
              self.datalist = res.data.model.list;
              self.CurrentAreaName=self.datalist[self.datalist.length-1].AreaName=="合计"?'云南省':self.datalist[self.datalist.length-1].AreaName;
              for(var i=0;i<self.datalist.length;i++)
              {   
                  self.AreaData.push(self.datalist[i].AreaName);
                  self.ProductNumberData.push(self.datalist[i].ProductNumber);
                  self.SaleNumberData.push(self.datalist[i].SaleNumber);
                  self.ProductMoneyData.push(self.datalist[i].ProductMoney);
                  self.SaleMoneyData.push(self.datalist[i].SaleMoney);

                    //地图数据
                  self.MapProductNumberData.push({'name':self.datalist[i].AreaName,'value':self.datalist[i].ProductNumber});
                  self.MapSaleNumberData.push({'name':self.datalist[i].AreaName,'value':self.datalist[i].SaleNumber});
                  self.MapProductMoneyData.push({'name':self.datalist[i].AreaName,'value':self.datalist[i].ProductMoney});
                  self.MapSaleMoneyData.push({'name':self.datalist[i].AreaName,'value':self.datalist[i].SaleMoney});
              } 
              self.barList.push(self.ProductNumberData,self.SaleNumberData,self.ProductMoneyData,self.SaleMoneyData),
              //地图数据
              self.mapList.push(self.MapProductNumberData,self.MapSaleNumberData,self.MapProductMoneyData,self.MapSaleMoneyData);
              console.log(self.barList);
              console.log(self.mapList);
              self.showEcharts();
          } else {
            self.$Modal.error({ title: "提示信息", content: res.data.message });
          }
        });
    },
    showEcharts(){//显示柱状图
      //显示柱状图
      var self=this;
      var containerBar=document.getElementById('divBar');
      var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
      // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      var resizeContainerBar = function () {
          //containerTable[0].clientWidth 左侧菜单栏的宽度
          containerBar.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
          containerBar.style.height = (window.innerHeight-230)+'px';
      };
      //设置容器高宽
      resizeContainerBar();
      var myBar = myEcharts.init(containerBar, 'shine');
      var BarName=this.searchModel.FillInYear+'年(三)'+self.CurrentAreaName+'水果外销调查柱状统计图(全面统计)';
      var optionBar = self.GetBarOption(BarName,self.AreaData,self.echartsItem,self.barList);
      myBar.setOption(optionBar);
      //******************显示地图
      var self=this;
      var containerMap=document.getElementById('divMap');
      var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
      // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      var resizeContainerMap = function () {
          //containerTable[0].clientWidth 左侧菜单栏的宽度
          containerMap.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
          containerMap.style.height = (window.innerHeight-230)+'px';
      };
      //设置容器高宽
      resizeContainerMap();

      var myMap = myEcharts.init(containerMap, 'shine');
      var MapName=this.searchModel.FillInYear+'年(三)'+self.CurrentAreaName+'水果外销调查统计地区分布图(全面统计)';
      var optionMap = self.GetMapOption(MapName,self.GeoData,self.mapType,self.echartsItem,self.mapList);
      myMap.setOption(optionMap);
      //用于使chart自适应高度和宽度
      window.onresize = function () {
          //重置容器高宽
          resizeContainerBar();
          resizeContainerMap();
          myMap.resize();
          myBar.resize();
      };
    },
    rowStyle(index,length){  
      let striprow ={ backgroundColor: '#ebf7ff'};      
      if(index==(length-1)){       
        return {
             backgroundColor: '#f9c912'
          }
      }
      else if(index%2 !=0){
        return striprow;
      }
      else{        
        return 
      }
    },
    rowClassName (row, index){      
      if(row.tag==1){
        return 'city-row'
      }
      else if(row.tag==2){
        return 'provin-row'
      }
    },
    getDetail(AreaCode){
      var self = this;
      this.$http.get("FruExport/GetStatisListData", {params: {AreaCode: AreaCode,FillInYear: this.searchModel.FillInYear}}).then(function(res) {
          if (res.data.status == 1) {
            self.detailList = res.data.model.list;
            self.showType = true;            
          } else {
            self.$Modal.error({ title: "提示信息", content: res.data.message });
          }
        });
    },
    Download(AreaCode){
      var self = this;
      var win = window.open(this.$http.defaults.baseURL + "FruExport/GetStatisExcel?FillInYear="  + this.searchModel.FillInYear + "&&AreaCode=" + AreaCode);  
      //console.log(win.requestAnimationFrame);          
    },
    GetData(){
      this.getListData();
    },
    currentYear() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth();
      if (month > 1) {
        this.searchModel.FillInYear = year.toString();
      } else {
        this.searchModel.FillInYear = (year - 1).toString();
      }
    }

  },
  //创建Vue页面方法
  created: function() {
    this.currentYear();
    this.GetData();
  },
  watch: {
    //需要监听的在此处新增监听对象
  }
};
</script>
